<template>
    <div class="wrapper">
        <van-nav-bar safe-area-inset-top placeholder>
            <template #title>
                <van-col>
                    <van-icon name="points" size="20" color="red" />
                </van-col>
                <van-col>搭配对比</van-col>
            </template>
        </van-nav-bar>

        <van-row class="top-button-container">
            <van-button plain icon='close' type="danger" @click="onClear">清空</van-button>
            <van-button plain icon='replay' type="primary" @click="onReflush">刷新</van-button>
            <van-button plain icon='replay' type="primary" @click="permSwitch = !permSwitch">排列切换</van-button>
            <van-button plain icon='replay' type="primary" @click="digiteSwitch = !digiteSwitch">数字切换</van-button>
        </van-row>
        <van-divider />

        <!-- 模拟暂无数据-->
        <!-- <el-table v-show="!compare_list" :data="compare_list"></el-table> -->

        <van-grid class="result-container" gutter="5" :column-num="3" :center="false">
            <compare-item v-for="(item) in compare_list" :digiteSwitch="digiteSwitch" :permSwitch="permSwitch"
                :item="item">
                <template #buttons-1>

                    <van-button type="danger" icon="delete-o" @click="onRemove(item)" />

                    <!-- 收藏按钮： 添加收藏 -->
                    <van-button v-if="!item.favorited" plain type="danger" @click="onResultAddFavorite(item)"
                        icon="like-o" />

                    <!-- 收藏按钮:  取消按钮 -->
                    <el-popconfirm v-if="item.favorited" confirm-button-text='是的' cancel-button-text='不用了'
                        icon="el-icon-info" icon-color="red" title="确定要取消收藏吗?" @confirm="onResultAddFavorite(item)">
                        <van-button slot="reference" type="danger" plain size="medium" icon='like' />
                    </el-popconfirm>

                    <van-button type="danger" icon="search" plain @click="onGroupView(item)" />
                </template>

                <template #buttons-2>
                    <van-button type="danger" icon="guide-o" @click="toShare(item)" />
                    <van-button type="danger" plain icon="arrow-up" @click="setTop(item)" />
                    <van-button type="danger" plain icon="arrow-down" @click="setDown(item)" />
                </template>
            </compare-item>
        </van-grid>

        <!-- 查看结果弹出层 -->
        <van-popup v-model="calcResultSingleShow" round>
            <calc-result-view ref="crv" :calcResult="calcResult" :affixOptions="affixOptions" :affixList="affixList"
                v-on:crvClose="calcResultSingleShow = false" v-on:engrView="onResultViewSelectEngr"
                v-on:addFavorite="onResultAddFavorite" v-on:onResultRemove="onRemove">
                <template #right-btn>
                    <div @click="onResultAddFavorite(calcResult)" style="color:#1989fa;">
                        <van-icon :name="calcResult.favorited ? 'like' : 'like-o'" />
                        &nbsp;{{ calcResult.favorited | favoriteButtonText }}
                    </div>
                </template>
                <template #bottom-btn>
                    <van-button icon="minus" plain type="info" @click="onRemove(calcResult)">移除</van-button>

                    <van-button icon="share-o" plain type="warning" @click="$refs.crv.onShare()">分享</van-button>

                    <van-button icon="cluster" plain type="info" @click="onResultShowWeightsView(calcResult)">权重表
                    </van-button>

                    <van-button :icon="calcResult.favorited ? 'like' : 'like-o'" plain type="danger"
                        @click="onResultAddFavorite(calcResult)">{{ calcResult.favorited | favoriteButtonText }}
                    </van-button>
                </template>
            </calc-result-view>
        </van-popup>

        <!-- 弹出层->刻印详情 -->
        <engr-view :engrViewShow="engrViewShow" :engrViewData="engrViewData" :affixOptions="affixOptions"
            :affixList="affixList" v-on:close="engrViewShow = false"></engr-view>

        <!-- 弹出层->收藏结果 -->
        <Favorited :isFavoritedShow="isFavoritedShow" :favoritedCalcResult="favoritedCalcResult" :affixList="affixList"
            :affixOptions="affixOptions" v-on:close="isFavoritedShow = false">
        </Favorited>

        <!-- 弹出层->查看权重表 -->
        <weights-view :isWeightsViewShow="isWeightsViewShow" :weightsResult="weightsResult" :affixList="affixList"
            :affixOptions="affixOptions" v-on:close="isWeightsViewShow = false">
        </weights-view>
    </div>
</template>

<script>
import { Toast, Notify } from 'vant';
import { CalcServer } from '../server/servers';
import EngrView from './popups/EngrView';
import CalcResultView from './CalcResultView';
import WeightsView from './popups/WeightsView';
import Favorited from './popups/Favorited';
import CompareItem from './CompareItem'

export default {
    name: 'Compare',

    components: {
        EngrView, CalcResultView, WeightsView, Favorited, CompareItem
    },

    computed: {
        affixList() {
            return this.$store.state.affixList;
        },

        affixOptions() {
            return this.$store.state.affixOptions;
        },

        compare_list() {
            return this.$store.state.compare_list;
        }
    },

    // watch: {
    //     $route(to, from) {
    //         if (to.path == '/Compare') {
    //             this.onReflush();
    //         }
    //     },

    //     compare_list(){
    //         console.log("Compare.vue 检车到compare_list变化")
    //     },
    // },

    filters: {
        favoriteButtonText(flag) {
            return flag ? '已收藏' : '收藏';
        },
    },

    data() {
        return {
            affixWeight: null,
            digiteSwitch: false, //数字和罗马数字切换
            permSwitch: false, //六角和双排切换

            calcResultSingleShow: false,
            calcResult: null,

            engrViewShow: false,
            engrViewData: null,

            isWeightsViewShow: false,
            weightsResult: null,

            isFavoritedShow: false,
            favoritedCalcResult: null,
        }
    },

    methods: {

        onRemove(item) {
            console.log("移除一条结果", item);
            this.calcResultSingleShow = false;
            item.compared = false;
            this.$store.commit("spliceItemCompareList", item);
            // this.$forceUpdate();
        },

        onClear() {
            this.compare_list.forEach(e => {
                e.compared = false;
            });

            this.$store.commit("clearCompareList");
            // this.$forceUpdate();
        },

        toShare(item){
            this.calcResult = item;
            this.calcResultSingleShow = true;
            this.$nextTick().then(()=>{
                this.$refs.crv.onShare();
            })
        },

        setTop(item) {
            this.$store.commit("setLocCompareList", {
                item, loc: 1
            });
            // this.$forceUpdate();
        },

        setDown(item) {
            this.$store.commit("setLocCompareList", {
                item, loc: -1
            });
            // this.$forceUpdate();
        },

        onReflush() {
            console.log("Compare页面刷新");
            // this.$forceUpdate();
        },

        onAffixBtnnMouseover(affix) {
            this.affixList.some(e => {
                if (e.name == affix) {
                    Notify.clear();
                    Notify({ type: 'success', message: '\n' + e.text, duration: 2000 });
                    return true;
                }
            });
        },

        onGroupView(item) {
            this.calcResult = item;
            this.calcResultSingleShow = true;
        },

        onResultViewSelectEngr(item) {
            this.engrViewData = item;
            this.engrViewShow = true;
        },

        onResultAddFavorite(item) {
            console.log("Compare.vue", "点击了收藏2", item.favorited);

            if (item.favorited) {
                //取消收藏
                let rs = CalcServer.removeFavorited(item)

                if (rs.code == 0) {
                    item.favorited = false; //后台可能已经删除了 直接删除
                } else {
                    console.log("取消收藏失败", rs);
                }
            } else {
                //添加收藏  弹出询问框
                this.favoritedCalcResult = item;
                this.isFavoritedShow = true;
            }
        },

        onResultShowWeightsView(item) {
            console.log("Compare.vue", 'onResultShowWeightsView', item);
            if (!item.weightId || item.weightId == "") {
                Notify({ type: 'warning', message: "\n该记录没有关联权重表哦", duration: 2000 });
                return
            }

            let rs = CalcServer.queryWeightsById(item.weightId);

            if (!rs) {
                Notify({ type: 'warning', message: "\n权重表已被删除", duration: 2000 });
                return
            }

            this.weightsResult = rs;
            this.isWeightsViewShow = true;
            console.log("查看关联权重表", rs);
        }
    }
}
</script>

<style scoped>
.top-button-container {
    /* margin-top: 50px; */
}


.top-button-container .van-button {
    float: left;
    width: 20%;
    height: 35px;
    margin-left: 1%;
    margin-bottom: -6px;
    font-size: 12px;
}

.top-button-container .van-button:first-child {
    margin-left: 8.5%;
}

.result-container {
    width: 99%;
    height: 635px;
    overflow-y: auto;
    overflow-x: hidden;
}
</style>